<template>
  <div class="body">
    <div class="tags" v-if="category.length>0">
      <el-button round v-for="tag in category" @click="selectGd(tag)" :class="{'active':activeTag===tag}">
        {{ tag }}
      </el-button>
      <el-popover :width="700" trigger="click" @show="togglePopover" @hide="togglePopover" placement="bottom-start">
        <template #reference>
          <el-button round :class="{'active':!category.includes(activeTag)}">
            更多分类
            <el-icon :class="{ 'rotate-icon': visible }">
              <i-bi-chevron-down />
            </el-icon>
          </el-button>
        </template>
        <template #default>
          <div class="user-card">
            <b>语种</b>
            <el-button round v-for="tag in category0" @click="selectGd(tag)" :class="{'active':activeTag===tag}">
              {{ tag }}
            </el-button>
          </div>
          <div class="user-card">
            <b>风格</b>
            <el-button round v-for="tag in category1" @click="selectGd(tag)" :class="{'active':activeTag===tag}">
              {{ tag }}
            </el-button>
          </div>
          <div class="user-card">
            <b>场景</b>
            <el-button round v-for="tag in category2" @click="selectGd(tag)" :class="{'active':activeTag===tag}">
              {{ tag }}
            </el-button>
          </div>
          <div class="user-card">
            <b>情感</b>
            <el-button round v-for="tag in category3" @click="selectGd(tag)" :class="{'active':activeTag===tag}">
              {{ tag }}
            </el-button>
          </div>
        </template>
      </el-popover>
    </div>
    <el-scrollbar class="gd" v-loading="loading" element-loading-background="transparent">
      <div class="background-image" v-for="item in gdlist" :style="`background-color: ${item.bgcolor}`">
        <div class="topdiv" :style="`background:${item.gradation}`"  @click="openGd(item.id)"></div>
        <img :src="item.coverImgUrl" alt="背景图片" class="image" />
        <div class="content">
          <div class="description-container">
            <el-text class="description" line-clamp="2">{{ item.name }}</el-text>
          </div>
          <div class="other-description">
            <ul>
              <li>1. 城南花已开</li>
              <li>2. 探故知</li>
              <li>3. {{item.id}}</li>
            </ul>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import {catlist,playList} from "@/assets/apis/http";
import ColorExtractor from "@/tools/ColorExtractor";
import {TuijianGedan} from "@/assets/apis/MusicDataType";
import { useRouter } from "vue-router";
import util from "@/tools/util";

const router = useRouter();
const gdlist = reactive<TuijianGedan[]>([]);
const visible = ref(false);
const activeTag = ref<string>("推荐")
const category = reactive<string[]>(["推荐"]);
//语种分类
const category0 = reactive<string[]>([]);
//风格
const category1 = reactive<string[]>([]);
//场景
const category2 = reactive<string[]>([]);
//情感
const category3 = reactive<string[]>([]);
//主题
const category4 = reactive<string[]>([]);
const loading = ref(false);

async function getTags() {
  try {
    const res = await catlist();
    console.log("分类响应对象", res);
    if (Array.isArray(res.sub)) {
      category0.push(...res.sub.filter(obj => obj.category === 0).map(obj => obj.name));
      category1.push(...res.sub.filter(obj => obj.category === 1).map(obj => obj.name));
      category2.push(...res.sub.filter(obj => obj.category === 2).map(obj => obj.name));
      category3.push(...res.sub.filter(obj => obj.category === 3).map(obj => obj.name));
      let catlist = res.sub.filter(obj => obj.category === 4).sort((a, b) => b.resourceCount - a.resourceCount).map(obj => obj.name);
      category.push(...catlist.slice(8))
      category4.push(...catlist.slice(0,8))
      console.log("精选分类", catlist);
    } else {
      console.error("res.sub 不是一个数组");
    }
  } catch (error) {
    console.error("获取标签时出错:", error);
  }
}

async function getGdlist(cat: string) {
  loading.value = true;
  try {
    const res = await playList({ cat: cat, limit: 50, order: 'hot' });
    const playlistPromises = res.playlists.map(async (item) => {
      let coverUrl = util.formatSongsPic(item.coverImgUrl, 150);
      const color = await ColorExtractor.getDominantColor(coverUrl);
      let color2 = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
      let color3 = `linear-gradient(to bottom, rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.2), rgba(${color[0]}, ${color[1]}, ${color[2]}, 1))`;
      return {
        id: item.id,
        coverImgUrl: coverUrl,
        name: item.name,
        bgcolor: color2,
        gradation: color3
      };
    });
    gdlist.splice(0, gdlist.length, ...await Promise.all(playlistPromises));
    console.log("歌单列表", gdlist);
  } catch (error) {
    console.error("Error fetching playlist data:", error);
  } finally {
    loading.value = false;
  }
}

function selectGd(cat: string) {
  if (loading.value){return}
  activeTag.value=cat
  getGdlist(cat);
}

function togglePopover() {
  visible.value = !visible.value;
}

function openGd(id: number) {
  router.push({ path: '/gedan/'+id });
}
getTags();
getGdlist(activeTag.value);
</script>
<style scoped lang="scss">
.body {
  display: flex;
  flex-direction: column;
  .gd{
    height: calc(100vh - 145px);
    margin-left: 20px;
    margin-right: 20px;
  }
}

.tags {
  margin-bottom: 10px;
  margin-left: 20px;
  margin-right: 20px;

  .active {
    background-color: var(--my-bg-menu-active);
  }

  .rotate-icon {
    transform: rotate(180deg);
    transition: transform 0.3s;
  }
}
.user-card{
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  .active {
    background-color: var(--my-bg-menu-active);
  }
}

:deep(.el-scrollbar__view) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin-top: 10px;
  gap: 20px;

  .background-image {
    position: relative;
    border-radius: 15px;
    aspect-ratio: 1 / 1.25;
    width: 180px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: rgb(240, 243, 246);
    cursor: pointer;

    .topdiv {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 75%;
      display: none;
    }

    .image {
      height: 75%;
      width: 100%;
    }

    .title {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 18px;
    }

    .content {
      display: flex;
      transition: transform 0.3s ease;
      flex-direction: column;
      flex-wrap: nowrap;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: flex-start;


      .description-container {
        overflow: hidden;
        text-align: left;
        font-size: 15px;

        .description {
          margin-block-start: 10px;
          margin-inline-start: 10px;
          margin-inline-end: 10px;
          color: rgb(255,255,255);
        }
      }

      .other-description {
        font-size: 12px;
        display: none;

        ul {
          list-style: none;
          padding-inline-start: 12px;
          margin-block-start: 0;

          li {
            text-align: left;
            padding-top: 5px;
          }
        }
      }
    }

    &:hover {
      .content {
        transform: translateY(-60px); /* 鼠标悬停时上移 */
      }

      .topdiv {
        display: block;
      }

      .other-description {
        display: block;
      }
    }
  }
}
</style>
